<template>
    <div>
        <!-- 质量评价 -->
        <div>
            <el-card style="height: 100%" class="card">
                <div slot="header">
                    <span>质量评价</span>
                </div>
                <!-- 测井解释结果 -->
                <el-row class="dataform">
                    <div class="headstyle">测井解释结果</div>
                    <el-form ref="wellData" :model="wellData" label-width="120px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="评价井段">
                                    <el-input v-model="wellData.begindepth" style="width: 45%"></el-input>~
                                    <el-input v-model="wellData.enddepth" style="width: 45%"></el-input>
                                    <!-- <template> 
                                <el-select v-model="wellData.begindepth" clearable placeholder="请选择评价井段" style="width:100%"> 
                                    <el-option
                                    v-for="item in tinterface1Options"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                    :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                                </template> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="一界面优质率">
                                    <el-input v-model="wellData.goodrateproductinterface1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="一界面合格率">
                                    <el-input v-model="wellData.passrateproductinterface1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="二界面优质率">
                                    <el-input v-model="wellData.goodrateproductinterface2"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="二界面合格率">
                                    <el-input v-model="wellData.passrateproductinterface2"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="一二界面综合评价优质率">
                                    <el-input v-model="wellData.goodrateproductinterface12"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="一二界面综合评价合格率">
                                    <el-input v-model="wellData.passrateproductinterface12"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item>
                                    <el-button type="primary" @click="onSave">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>
                <!-- 测井解释结果第一界面 -->
                <el-row class="dataTable">
                    <div class="headstyle">测井解释结果第一界面</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="CreateCementEvaluation1">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportCementEvaluation1" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <!-- 下载模板 -->
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="DownLoadModel1">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData1"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="210" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <span>{{ (searchModel.currentPage1 - 1) * searchModel.pageSize1 + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" prop="logresultinterface1id" label="序号" /> -->
                        <el-table-column align="center" prop="wellSection" label="井段" />
                        <el-table-column align="center" prop="goodrateproductinterface1" label="长度" />
                        <el-table-column align="center" prop="passrateproductinterface1" label="评价结果" />
                    </el-table>
                </el-row>
                <!-- 显示页数 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx1"
                        :page-size="pageSizes1"
                        :total="totalData1"
                        @current-change="handlePageChange1"
                    ></el-pagination>
                </div>
                <!-- 测井解释结果第二界面 -->
                <el-row class="dataTable">
                    <div class="headstyle">测井解释结果第二界面</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="CreateCementEvaluation2">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportCementEvaluation2" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <!-- 下载模板 -->
                            <el-button type="primary" @click="DownLoadModel2">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData2"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="210" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="handleDelete2(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <span>{{ (searchModel.currentPage2 - 1) * searchModel.pageSize2 + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" prop="order" label="序号" /> -->
                        <el-table-column align="center" prop="wellSection" label="井段" />
                        <el-table-column align="center" prop="goodrateproductinterface1" label="长度" />
                        <el-table-column align="center" prop="passrateproductinterface1" label="评价结果" />
                    </el-table>
                </el-row>
                <!-- 显示页数 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx2"
                        :page-size="pageSizes2"
                        :total="totalData2"
                        @current-change="handlePageChange2"
                    ></el-pagination>
                </div>
                <!-- 测井解释结果第一界面--编辑弹出框 -->
                <el-dialog title="测井解释结果第一界面数据修改" :visible.sync="editVisible1" width="60%">
                    <el-form :model="form1" ref="form1" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="开始井段">
                                <el-input v-model="form1.begindepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束井段">
                                <el-input v-model="form1.enddepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="长度">
                                <el-input v-model="form1.goodrateproductinterface1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="评价结果">
                                <template>
                                    <el-select
                                        v-model="form1.passrateproductinterface1"
                                        clearable
                                        placeholder="请选择评价结果"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            v-for="item in tinterface1Options"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="saveEdit1" v-if="isNewData1">确 定</el-button>
                        <el-button type="primary" @click="saveEdit1" v-else>确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 测井解释结果第二界面--编辑弹出框 -->
                <el-dialog title="测井解释结果第二界面数据修改" :visible.sync="editVisible2" width="60%">
                    <el-form :model="form2" ref="form2" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="开始井段">
                                <el-input v-model="form2.begindepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束井段">
                                <el-input v-model="form2.enddepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="长度">
                                <el-input v-model="form2.goodrateproductinterface1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="评价结果">
                                <template>
                                    <el-select
                                        v-model="form2.passrateproductinterface1"
                                        clearable
                                        placeholder="请选择评价结果"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            v-for="item in tinterface1Options"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="saveEdit2" v-if="isNewData2">确 定</el-button>
                        <el-button type="primary" @click="saveEdit2" v-else>确 定</el-button>
                    </span>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import {
    CementEvaluationUpdate1,
    CementEvaluationDelete1,
    FindCementEvaluationByCondition1,
    CementEvaluationAdd1,
    CementEvaluationUpdate2,
    CementEvaluationDelete2,
    FindCementEvaluationByCondition2,
    CementEvaluationAdd2
} from '../../../api/module/dataClassification/wellSementEvaluation/wellSementEvaluation.js';
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel';
import { ListDataDictByCondition } from '../../../api/module/dataClassification/data_classification.js';
import { InsertOrUpdateLogResult, FindLogResultByCondition } from '../../../api/module/dataClassification/CementEvaluation';
export default {
    data() {
        return {
            wellstructureid: localStorage.getItem('wellstructureid'),
            wellData: {
                begindepth: null,
                bitsize: localStorage.getItem('bitsize'),
                caselevel: '',
                casesize: localStorage.getItem('casesize'),
                enddepth: null,
                goodrateproductinterface1: null,
                goodrateproductinterface12: null,
                goodrateproductinterface2: null,
                logresultid: null,
                no: localStorage.getItem('no'),
                passrateproductinterface1: null,
                passrateproductinterface12: null,
                passrateproductinterface2: null,
                wellname: localStorage.getItem('wellname')
            },
            tableData1: [],
            tableData2: [],
            tinterface1Options: [],
            //分页导航1
            pageIdx1: 1,
            pageSizes1: 10,
            totalData1: 0,
            //分页导航2
            pageIdx2: 1,
            pageSizes2: 10,
            totalData2: 0,
            //查询行的数据
            searchModel: {
                //查询部分默认的绑定值
                wellName: localStorage.getItem('wellname'), //井名
                // wellType: '', //井型
                // wellCategory: '', //井别
                // startDrillDate: '', //开钻日期
                // endDrillDate: '', //完钻日期
                currentPage: 1, //当前页
                pageSize: 10, //页大小
                //测井解释结果第一界面
                currentPage1: 1, //当前页
                pageSize1: 10, //页大小
                //测井解释结果第二界面
                currentPage2: 1, //当前页
                pageSize2: 10 //页大小
            },
            condition: {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            },
            editVisible1: false,
            editVisible2: false,
            isNewData1: false,
            isNewData2: false,
            form1Edit: {},
            form2Edit: {},
            form1: {},
            form2: {},
            pageIdx: 1,
            pageSizes: 10,
            totalData: 0,
            //table展示数据（样式）
            tableHeight: this.$route.query.tableHeight,
            rowStyle: { height: '30px' },
            cellStyle: {
                padding: 0
            }
        };
    },
    created() {
        this.FindCementEvaluationByCondition1();
        this.FindCementEvaluationByCondition2();
        this.ListDataDictByConditionEvaluation();
        this.FindLogResultByCondition();
    },
    mounted() {},
    methods: {
        //测井解释结果--查询
        FindLogResultByCondition() {
            FindLogResultByCondition(this.wellstructureid)
                .then((res) => {
                    if (res.data == null) {
                    } else {
                        this.wellData = res.data;
                    }
                    console.log('测井解释查询成功res', res);
                })
                .catch((err) => {
                    console.log('测井解释查询失败');
                });
        },
        //测井解释结果--新增（修改）
        InsertOrUpdateLogResult() {
            InsertOrUpdateLogResult(this.wellstructureid, this.wellData).then((res) => {
                console.log(res);
                this.$message.success('保存成功！');
                this.FindLogResultByCondition();
            });
        },
        //测井解释结果--保存
        onSave() {
            this.InsertOrUpdateLogResult();
        },
        //查询表格1数据
        FindCementEvaluationByCondition1() {
            FindCementEvaluationByCondition1(this.condition, this.searchModel.currentPage1, this.searchModel.pageSize1).then((res) => {
                this.tableData1 = res.data.list;
                this.totalData1 = res.data.totalSize;
            });
        },
        //修改（表格--行数据）-- 测井解释结果第一界面
        CementEvaluationUpdate1() {
            CementEvaluationUpdate1(this.form1).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第一界面修改成功！');
            });
        },
        //新增（表格--行数据）-- 测井解释结果第一界面
        CementEvaluationAdd1() {
            CementEvaluationAdd1(this.form1).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第一界面新增成功！');
            });
        },
        //编辑--测井解释结果第一界面
        handleEdit1(index, row) {
            this.editVisible1 = true;
            this.isNewData1 = false;
            console.log(row);
            this.form1Edit = row;
            var depth = this.form1Edit.wellSection.split('~');
            this.form1 = {
                wellname: localStorage.getItem('wellname'),
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                caselevel: '',
                logresultinterface1id: this.form1Edit.logresultinterface1id,
                goodrateproductinterface1: this.form1Edit.goodrateproductinterface1,
                passrateproductinterface1: this.form1Edit.passrateproductinterface1,
                begindepth: depth[0],
                enddepth: depth[1]
            };
        },
        //新增--测井解释结果第一界面
        CreateCementEvaluation1() {
            this.editVisible1 = true;
            this.isNewData1 = true;
            this.form1 = {
                wellname: localStorage.getItem('wellname'),
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                caselevel: '',
                logresultinterface1id: null,
                goodrateproductinterface1: null,
                passrateproductinterface1: '',
                begindepth: null,
                enddepth: null
            };
        },
        //删除（表格--行数据）-- 测井解释结果第一界面
        CementEvaluationDelete1(id) {
            CementEvaluationDelete1(id).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第一界面删除成功！');
            });
        },
        //保存--测井解释结果第一界面
        saveEdit1() {
            this.editVisible1 = false;
            //保存操作
            if (this.isNewData1) {
                //新增操作
                this.CementEvaluationAdd1();
                this.FindCementEvaluationByCondition1();
            } else {
                //更新操作
                this.CementEvaluationUpdate1();
                this.FindCementEvaluationByCondition1();
            }
        },
        //删除--测井解释结果第一界面
        handleDelete1(index, row) {
            console.log(row);
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$message.success('删除成功')
                    this.tableData1.splice(index, 1);
                    //删除数据库数据操作
                    this.CementEvaluationDelete1(row.logresultinterface1id);
                })
                .catch(() => {});
        },
        //表格1导入
        ImportCementEvaluation1(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'LogResultInterface1')
                .then((res) => {
                    console.log('导入成功...');
                    console.log(res);

                    this.FindCementEvaluationByCondition1();
                    loading.close();
                    this.$message.success('数据导入成功');
                })
                .catch((err) => {
                    loading.close();
                });
        },
        //分页导航
        handlePageChange1(page) {
            this.pageIdx1 = page;
            this.searchModel.currentPage1 = page;
            this.FindCementEvaluationByCondition1();
        },
        //获取评价结果下拉列表
        ListDataDictByConditionEvaluation() {
            ListDataDictByCondition('评价结果').then((res) => {
                this.tinterface1Options = res.data;
            });
        },
        //查询表格2数据
        FindCementEvaluationByCondition2() {
            FindCementEvaluationByCondition2(this.condition, this.searchModel.currentPage2, this.searchModel.pageSize2).then((res) => {
                this.tableData2 = res.data.list;
                this.totalData2 = res.data.totalSize;
            });
        },
        //修改（表格--行数据）-- 测井解释结果第二界面
        CementEvaluationUpdate2() {
            CementEvaluationUpdate2(this.form2).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第一界面修改成功！');
            });
        },
        //新增（表格--行数据）-- 测井解释结果第二界面
        CementEvaluationAdd2() {
            CementEvaluationAdd2(this.form2).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第二界面新增成功！');
            });
        },
        //编辑--测井解释结果第二界面
        handleEdit2(index, row) {
            this.editVisible2 = true;
            this.isNewData2 = false;
            this.form2Edit = row;
            var depth = this.form2Edit.wellSection.split('~');
            this.form2 = {
                wellname: localStorage.getItem('wellname'),
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                caselevel: '',
                begindepth: depth[0],
                enddepth: depth[1],
                goodrateproductinterface1: this.form2Edit.goodrateproductinterface1,
                logresultinterface1id: this.form2Edit.logresultinterface1id,
                passrateproductinterface1: this.form2Edit.passrateproductinterface1
            };
        },
        //新增--测井解释结果第二界面
        CreateCementEvaluation2() {
            this.editVisible2 = true;
            this.isNewData2 = true;
            this.form2 = {
                wellname: localStorage.getItem('wellname'),
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                caselevel: '',
                logresultinterface1id: null,
                goodrateproductinterface1: null,
                passrateproductinterface1: '',
                begindepth: null,
                enddepth: null
            };
        },
        //删除（表格--行数据）-- 测井解释结果第二界面
        CementEvaluationDelete2(id) {
            CementEvaluationDelete2(id).then((res) => {
                console.log(res);
                this.$message.success('测井解释结果第一界面删除成功！');
            });
        },
        //保存--测井解释结果第二界面
        saveEdit2() {
            this.editVisible2 = false;
            //保存操作
            if (this.isNewData2) {
                //新增操作
                this.CementEvaluationAdd2();
                this.FindCementEvaluationByCondition2();
            } else {
                //更新操作
                this.CementEvaluationUpdate2();
            }
        },
        //删除--井漏复杂情况
        handleDelete2(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$message.success('删除成功')
                    this.tableData2.splice(index, 1);
                    //删除数据库数据操作
                    this.CementEvaluationDelete2(row.logresultinterface2id);
                })
                .catch(() => {});
        },
        //表格2导入
        ImportCementEvaluation2(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'LogResultInterface2')
                .then((res) => {
                    console.log('导入成功...');
                    console.log(res);
                    this.FindCementEvaluationByCondition2();
                    loading.close();
                    this.$message.success('数据导入成功');
                })
                .catch((err) => {
                    loading.close();
                    this.$message.warning('数据导入失败');
                });
        },
        //分页导航
        handlePageChange2(page) {
            this.pageIdx2 = page;
            this.searchModel.currentPage2 = page;
            this.FindCementEvaluationByCondition2();
        },
        //下载模板1
        DownLoadModel1() {
            //下载excel模板
            downTemplateExcel('LogResultInterface1').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '测井解释第一界面LogResultInterface1 - 副本.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },
        //下载模板2
        DownLoadModel2() {
            //下载excel模板
            downTemplateExcel('LogResultInterface2').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '测井解释第二界面LogResultInterface2.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    }
};
</script>

<style scoped>
.card >>> .el-card__body {
    padding: 5px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}
.dataform {
    width: 97%;
    margin-left: 20px;
    margin-top: 10px;
}
.dataTable {
    width: 97%;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}
.headstyle {
    height: 25px;
    font-size: 14px;
    padding: 5px 10px;
    background-color: hsl(225, 39%, 48%);
    color: white;
}
form {
    margin-top: 10px;
}

.inputstyle {
    margin-left: 13px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.upload-demo >>> .el-upload--text {
    width: 57px;
    height: 50px;
    border-radius: 0px;
    border: none;
    display: flex;
    align-items: center;
}
</style>
